<template>
	<view >
		<view class="main">
			<view class="search">
				<view class="city" @click="open()">
					<text>{{input}}</text>
					<u-icon  name="arrow-down-fill" color="#444" size="12"></u-icon>
				</view>
				<view class="shop" @click="visibleCity = true ">
					<text>{{shopValue}}</text>
					<u-icon name="arrow-down-fill" color="#444" size="12"></u-icon>
				</view>
				<view class="round"><u-search placeholder="搜索" :showAction="false" shape="round" ></u-search></view>
			</view>
			<view class="map">
				<view class="left">
					<text>{{shopValue}} </text>
					<u-icon  name="map-fill" color="#444" size="18"></u-icon>
				 </view>
				 <view class="right">
					 <text>3公里内</text>
					 <u-icon name="arrow-down-fill" color="#444" size="18"></u-icon>
				 </view>
			</view>
			<view class="swiper">
				<z-swiper v-model="list" :options="options">
				  <z-swiper-item :custom-style="{width:'550rpx',height:'339rpx'}" class="display-flex justify-center" v-for="(item,index) in list" :key="index">
				    <image class="image" :src="item.img" mode="aspectFill"> </image>
					<view class="mark">
						<view class="water-mark">
							<view class="school">{{item.name}}</view>
							<view class="info">
								<text>800人搜索过</text>
								<text>距您200m</text>
							</view>
						</view>
					</view>
				  </z-swiper-item>
				</z-swiper>
			</view>
				<scroll-view  class="goods " scroll-with-animation scroll-y :scroll-top="cateScrollTop" >
					<view class="category">
						<view class="items" v-for="(good, key) in goods" :key="key" @click="goDetail(good)">
							<!-- 商品 begin -->
							<view class="good" >
								<image src="https://family-care.oss-cn-shanghai.aliyuncs.com/static/background/shop.png" class="image"></image>
								<view class="right">
									<text class="name">{{good.school_name}}</text>
									<text class="tips">{{good.address}}</text>
									<view class="price_and_action">
										<view class="display-flex justify-between ">
											<text class="price">3000人搜索过</text>
											<text class="old-price">距离2.0km</text>
										</view>
										
									</view>
								</view>
							</view>
							<!-- 商品 end -->
						</view>
					</view>
				</scroll-view>
		</view>
		<u-picker @change="changeProvince" :show="visible" :columns="provinceList" @confirm="enterProvince" keyName="region_name"></u-picker>
		<u-picker@change="changeCity" :show="visibleCity" :columns="cityList" @confirm="enterCity" keyName="region_name"></u-picker>
		<u-picker :show="showShop" :columns="columns" @confirm="enter"></u-picker>
		<!-- <cityPicker :column="column" :default-value="defaultValue" :mask-close-able="maskCloseAble" @confirm="confirm" @cancel="cancel" :visible="visible"/> -->
	</view>
		
</template>

<script>
	import cityPicker from '@/components/piaoyi-cityPicker/piaoyi-cityPicker.vue'
	export default {
		components:{
			cityPicker
		},
		data() {
			return {
				selectSchool:'',
				selectSchoolId:'',
				 columns: [
					['龙华校区', '盐田校区']
				 ],
				 showShop:false,
				 shopValue:'选择城市',
				options: {
					
					loop : true,
					autoplay:true,
					delay:2000,
					effect: 'coverflow',
					centeredSlides: true,
					slidesPerView: 'auto',
					coverflowEffect: {
						rotate: 50,
						stretch: 0,
						depth: 100,
						modifier: 1,
						slideShadows: true,
					},
				},
				list: [
						{
							name:'幼幼帮盐田校区',
							img:'https://family-care.oss-cn-shanghai.aliyuncs.com/static/background/waterMark.png'
						},{
							name:'深圳市幼幼帮龙华校区',
							img:'https://family-care.oss-cn-shanghai.aliyuncs.com/static/background/waterMark.png'
						},{
							name:'幼幼帮盐田校区',
							img:'https://family-care.oss-cn-shanghai.aliyuncs.com/static/background/waterMark.png'
						},{
							name:'幼幼帮盐田校区',
							img:'https://family-care.oss-cn-shanghai.aliyuncs.com/static/background/waterMark.png'
						},
						
							
				],
				value:false,
				input:'选择省份',
				 visible: false,
				 visibleCity: false,
				maskCloseAble: true,
				str: '',
				defaultValue: '420103',
				// defaultValue: ['河北省','唐山市','丰南区'],
				column: 3,
				city:'选择城市',
				goods:[],
				cateScrollTop: 0,
				provinceList:[],
				cityList:[],
				provinceId:'',
				cityId:''
			};
		},
		 onLoad() {
			 this.init()
			 this.getCity()
		},
		methods: {
			enterProvince(e) {
				this.visible = false
				this.provinceId = e.value[0].region_id
				this.input = e.value[0].region_name
				this.getCity(this.provinceId)
			},
			enterCity(e) {
				this.visibleCity = false
				this.cityId = e.value[0].region_id
				this.shopValue = e.value[0].region_name
			},
			changeProvince(e) {
				this.provinceId = e.value[0].region_id
				this.input = e.value[0].region_name
				this.visible = false
				this.getCity(this.provinceId)
				
			},
			changeCity(e) {
				this.cityId = e.value[0].region_id
				this.shopValue = e.value[0].region_name
				this.visibleCity = false
			},
			getCity(parentId) {
				let  args = {
					parent_id:''
				}
				if (parentId) {
					args.parent_id = parentId
				}
				
				this.common.http.request('/sys/region/children', 'GET', args, res => {
					if (res.data.code == 0) {
						// let result = []
						if(!parentId) {
							this.provinceList = [res.data.data]
							console.log(this.provinceList,'ssss')
						}else {
							this.cityList =[res.data.data]
						}
						
					}
				})
			},
			async init(){
				this.goods = []
				
				let  args = {
					province_id:this.provinceId,
					city_id:this.cityId
				}
				this.common.http.request('/school/list', 'GET', args, res => {
					if (res.data.code == 0) {
						this.goods = res.data.data.list
					}
				})
			},
			 open () {
					this.visible = true
				},
			confirm (val) {
				console.log(val)
				this.city = val.cityName
				this.input = val.provinceName + '-' + val.cityName + '-' + val.areaName
				this.visible = false
			},
			cancel () {
				this.visible = false
			},
			enter(e) {
				console.log(e,'sss')
				this.showShop = false
				this.shopValue = e.value[0]
			},
			goDetail(e) {
				this.selecSchool = e.school_name
				this.selecSchoolId = e.school_id
				uni.setStorageSync('school_name',this.selecSchool)
				uni.setStorageSync('school_id',this.selecSchoolId)
				
				uni.switchTab({
					url:'/pages/menu/menu'
				})
			}
		}
		
	}
</script>

<style lang="scss">
	
	.main {
		position: absolute;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}
	.search {
		width: 100%;
		height: 75rpx;
		background-color: #fefefe;
		padding: 5rpx 10rpx;
		
		.city {
			float: left;
			align-items: center;
			display: flex;
			font-size:32rpx;
			color:#444;
			vertical-align: middle;
			margin-right: 20rpx;
		}
		.shop {
			margin-top: 5rpx;
			float: left;
			align-items: center;
			display: flex;
			font-size: 30rpx;	
			color:#444;
			right: 0;
			vertical-align: middle;
		}
		.round {
			float: right;
			width: 220rpx;
		}
	}
	.map {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx 20rpx;
		.right {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 26rpx;
			color:#333333;
		}
		.left {
			
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 26rpx;
			color:#333333;
		}
	}
	.swiper {
		margin-top: 15rpx;
		// width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		.image {
			position: relative;
			width: 550rpx;
			height: 339rpx;
			border-radius: 28rpx;
			
		}
		.mark {
			position: absolute;
			background-color: rgba(0, 0, 0, 0.2);
			width: 550rpx;
			height: 339rpx;
			border-radius: 28rpx;
			color: white;
			.water-mark {
				position: absolute;
				bottom: 15rpx;
				width: 100%;
				.school {
					color: #fefefe;
					font-weight: bold;
					padding: 5rpx 48rpx 5rpx 32rpx;
					font-size: 26rpx;
				}
				.info {
					display: flex;
					justify-content: space-between;
					font-size: 22rpx;
					color: rgba(255, 255, 255, 1);
					padding: 0 48rpx 0 32rpx;
					margin-top: 10rpx;
					
				}
			}
		}
	}
	.shop-list {
		flex: 1;
		display: flex;
		flex-direction: column;
		}
	.goods {
		flex: 1;
		height: 100%;
		overflow: hidden;
		padding: 20rpx 25rpx;
		// background-color: #ffffff;
		.category {
			width: 100%;
			padding-bottom:67px;
		}
		.items {
							display: flex;
							flex-direction: column;
							background-color: #FFFFFF;
							padding: 25rpx 15rpx;
							border-radius: 21rpx;
							margin-bottom: 20rpx;
							.good {
								display: flex;
								align-items: center;
								margin-bottom: 30rpx;
								
								.image {
									width: 160rpx;
									height: 160rpx;
									margin-right: 20rpx;
									border-radius: 8rpx;
								}
			
								.right {
									flex: 1;
									overflow: hidden;
									display: flex;
									flex-direction: column;
									align-items: flex-start;
									justify-content: space-between;
									padding-right: 14rpx;
			
									.name {
										font-size: $font-size-base;
										margin-bottom: 10rpx;
									}
			
									.tips {
										width: 100%;
										font-size: $font-size-sm;
										color: $text-color-assist;
									}
			
									.price_and_action {
										width: 100%;
										margin-top: 10rpx;
										.price {
											color: rgba(153, 153, 153, 1);
											font-size: 22rpx;
										}
										.old-price {
											color: rgba(153, 153, 153, 1);
											font-size: 22rpx;
										}
										
									}
								}
							}
						}
		
	}
	
</style>
